<%@ include file="../common/IncludeTop.jsp"%>
<style type="text/css">

	table {
		width: 700px;
		padding: 0;
		margin: 0;
	}

	caption {
		padding: 0 0 5px 0;
		width: 700px;
		font: italic 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
		text-align: right;
	}

	th {
		font: bold 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
		color: #4f6b72;
		border-right: 1px solid #C1DAD7;
		border-bottom: 1px solid #C1DAD7;
		border-top: 1px solid #C1DAD7;
		letter-spacing: 2px;
		text-transform: uppercase;
		text-align: left;
		padding: 6px 6px 6px 12px;
		background: #d5eaca no-repeat;
	}

	th.nobg {
		border-top: 0;
		border-left: 0;
		border-right: 1px solid #C1DAD7;
		background: none;
	}

	td {
		border-right: 1px solid #C1DAD7;
		border-bottom: 1px solid #C1DAD7;
		background: #8FBC8F;
		font-size:16px;
		padding: 6px 6px 6px 12px;
		color: 	#F5FFFA;
	}


	td.alt {
		background: #F5FAFA;
		color: #797268;
	}

	th.spec {
		border-left: 1px solid #C1DAD7;
		border-top: 0;
		background: #fff no-repeat;
		font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	}

	th.specalt {
		border-left: 1px solid #C1DAD7;
		border-top: 0;
		background: #f5fafa no-repeat;
		font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
		color: #797268;
	}
</style>
<style>

	body{
		background: #8FBC8F ;
	}

	.button{
		cursor: pointer;
		width: 180px;
		line-height: 38px;
		text-align: center;
		font-weight: bold;
		color: #fff;
		text-shadow:1px 1px 1px #333;
		border-radius: 5px;
		margin:0 20px 20px 0;
		position: relative;
		overflow: hidden;
	}
	.button:nth-child(6n){
		margin-right: 0;
	}
	.button.green{
		border:1px solid #64c878;
		box-shadow: 0 1px 2px #b9ecc4 inset,0 -1px 0 #6c9f76 inset,0 -2px 3px #b9ecc4 inset;
		background: -webkit-linear-gradient(top,#90dfa2,#84d494);
		background: -moz-linear-gradient(top,#90dfa2,#84d494);
		background: linear-gradient(top,#90dfa2,#84d494);
	}
	.green:hover{
		background: -webkit-linear-gradient(top,#aaebb9,#82d392);
		background: -moz-linear-gradient(top,#aaebb9,#82d392);
		background: linear-gradient(top,#aaebb9,#82d392);
	} .green:active{
		  top:1px;
		  box-shadow: 0 1px 3px #4d7254 inset,0 3px 0 #fff;
		  background: -webkit-linear-gradient(top,#5eac6e,#72b37e);
		  background: -moz-linear-gradient(top,#5eac6e,#72b37e);
		  background: linear-gradient(top,#5eac6e,#72b37e);
	  }



</style>

<div id="BackLink">
	<a href="main">Return to Main Menu</a>
</div>
<script>
	$(function (){
		$('.quantity').each(function (){
			$(this).on('blur',function (){
				console.log(this.value+this.name);
				var certainItem = this.name;
				var certainItemQuantity = this.value;
				$.ajax({
					type		: "GET",
					url			: "itemQuantity?ItemID="+this.name+"&&ItemQuantity="+this.value,
					success		: function (data){
						console.log(data);
						if(data === 'Different'){
							if(confirm("Are you sure to change the quantity?")){
								$.ajax({
									type		: "GET",
									url			: "setQuantity?ItemID="+certainItem+"&&ItemQuantity="+certainItemQuantity,
									success		: function (data){
										console.log(data);
										var certainItem1 ="#"+certainItem;
										$(certainItem1).text("$"+data);
										//修改总价
									}
								})
							}else{
                                console.log(1);
                                $.ajax({
                                    type		: "GET",
                                    url			: "resetQuantity?ItemID="+certainItem,
                                    success		: function (data){
                                        console.log(data);
                                        var certainItem2 = certainItem + "A";
                                        console.log(certainItem2);
                                        var certainItem3 ="#"+certainItem2;
                                        console.log(certainItem3);
                                        $(certainItem3).val(data);
                                    }
                                })
							}
						}
					}
				});
			})
		})
	})
</script>
<div id="Catalog">

<div id="Cart">

<h2>Shopping Cart</h2>
	<form action="setItemQuantity" method="post">
	<table  class="imagetable">
		<tr>
			<th><b>Item ID</b></th>
			<th><b>Product ID</b></th>
			<th><b>Description</b></th>
			<th><b>In Stock?</b></th>
			<th><b>Quantity</b></th>
			<th><b>List Price</b></th>
			<th><b>Total Cost</b></th>
			<th>&nbsp;</th>
		</tr>

		<c:if test="${sessionScope.cart.numberOfItems == 0}">
			<tr>
				<td colspan="8"><b>Your cart is empty.</b></td>
			</tr>
		</c:if>

		<c:forEach var="cartItem" items="${sessionScope.cart.cartItems}">
			<tr>
				<td>
						<a href="viewItem?itemId=${cartItem.item.itemId}">${cartItem.item.itemId}</a>
				</td>
				<td>
						${cartItem.item.product.productId}
				</td>
				<td>
					${cartItem.item.attribute1} ${cartItem.item.attribute2}
					${cartItem.item.attribute3} ${cartItem.item.attribute4}
					${cartItem.item.attribute5} ${cartItem.item.product.name}
				</td>
				<td>
					${cartItem.inStock}
				</td>
				<td>
					<input type="text" class="quantity" id="${cartItem.item.itemId}A" name="${cartItem.item.itemId}" value="${cartItem.quantity}" />
				</td>
				<td>
					<fmt:formatNumber value="${cartItem.item.listPrice}" pattern="$#,##0.00" />
				</td>
				<td>
					<span id = "${cartItem.item.itemId}" ><fmt:formatNumber value="${cartItem.total}" pattern="$#,##0.00" /></span>
				</td>
				<td>
					<a class="button green"  href="removeItemFromCart?itemId=${cartItem.item.itemId}" class="Button">Remove</a>
				</td>
			</tr>
		</c:forEach>
		<tr>
			<td colspan="7">
<%--				<input type="submit" value="Update Cart">--%>
			</td>
			<td>&nbsp;</td>
		</tr>
	</table>
	</form>
	<c:if test="${sessionScope.cart.numberOfItems > 0}">
		<a href="checkout" class="button green">Proceed to Checkout</a>
	</c:if>
	</div>
</div>
<%--<div id="MyList">--%>
<%--  <c:if test="${sessionScope.accountBean != null}">--%>
<%--	<c:if test="${!sessionScope.accountBean.authenticated}">--%>
<%--	  <c:if test="${!empty sessionScope.accountBean.account.listOption}">--%>
<%--	    <%@ include file="IncludeMyList.jsp"%>--%>
<%--      </c:if>--%>
<%--	</c:if>--%>
<%--  </c:if>--%>
<%--</div>--%>

<div id="Separator">&nbsp;</div>
<%@ include file="../common/IncludeBottom.jsp"%>